<!--在表格上方添加搜索按钮-->
<div id="form1">
    <form class="layui-form" action="" id="usetable_search" >

        <div class="layui-inline">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-inline">
                <input type="text" name="corpName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="usetable_search_form">搜索</button>
        </div>
    </form>
</div>
<style>
    #form1{
        margin-top: 10px;
    }
</style>
<table id="use-table" lay-filter="use-table"></table>

<script>
    layui.use(function() {
        var table = layui.table
            , form = layui.form
            , $ = layui.$
            , layer = layui.layer;

        //第一个实例
        table.render({
            elem: '#use-table'
            , height: 312
            , url: '/use/getuses' //数据接口
            , page: {
                layout: ['prev', 'page', 'next', 'skip', 'limit', 'count']
                , limit: 2
                , limits: [2, 4, 6, 8, 10]
            }
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', sort: true}
                , {field: 'corpName', title: '公司'}
                , {field: 'appName', title: '应用名称'}
                , {field: 'appkey', title: 'appKey', sort: true}
                , {field: 'appsecret', title: ' 秘钥'}
                , {field: 'redirectUrl', title: '回调地址',}
                , {field: 'linit', title: '日调用量限制',}
                , {field: 'description', title: '描述',}
                , {
                    field: 'state', title: '状态', sort: true, width: 180, templet: function (d) {
                        return d.state == 1 ? '<span  class="layui-btn layui-btn-xs">有效</span>'
                            : '<span  class="layui-btn layui-btn-danger layui-btn-xs">无效</span>';
                    }
                }
                , {field: 'operate', title: '操作', toolbar: '#user-edit-bar', width: 180}//操作那一列
            ]]
            , toolbar: '#toolbarDemo'//加载id为toolbarDemo这个事件 头工具栏事件
        });

        //头工具栏事件
        table.on('toolbar(use-table)', function (obb) {
            switch (obb.event) {
                case 'addUser':
                    openEditWindow(null);
                    break;
                case 'deleteUser':
                    var data = table.checkStatus('use-table').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            })
                            $.ajax({
                                url: '/use/delete',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('use-table', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            }
        })

        //封装好的弹出窗口
        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html() : $('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load();//固定写法
                    // console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/use/" + (data == null ? 'add' : 'update'),//返回到哪个接口
                        //  url: '/sys/customer/update',           $("#user-add-form").serialize()   $("#user-edit-form").serialize()
                        data: data == null ? $("#user-add-form").serialize() : $("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('use-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }
                }
            });
        }

        // 按条件搜索事件
        form.on('submit(usetable_search_form)', function (data) {
            table.reload('use-table', {
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });

        //监听工具栏事件 --->编辑
        table.on('tool(use-table)', function (obj) {
            var data = obj.data;//取当前行数据
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }
            }
        })
        form.render();
    });
</script>

<!--添加增加 删除两个按钮-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon">&#xe654;</i>增加</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteUser"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</script>
<!--增加编辑按钮-->
<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>

<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form"
          method="post" enctype="multipart/form-data">
        <!--        <input type="hidden" name="id">-->
        <div class="layui-form-item">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-block">
                <input type="text" name="corpName" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-block">
                <input type="text" name="appName" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">appKey</label>
            <div class="layui-input-block">
                <input type="text" name="appkey" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">秘钥</label>
            <div class="layui-input-block">
                <input type="text" name="Appsecret" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">回调地址</label>
            <div class="layui-input-block">
                <input type="text" name="redirectUrl" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日调用量限制</label>
            <div class="layui-input-block">
                <input type="text" name="linit" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">连接公司id</label>
            <div class="layui-input-block">
                <input type="text" name="cusld" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form"
          method="post" enctype="multipart/form-data">
        <input type="hidden" name="id">
        <div class="layui-form-item">
        <label class="layui-form-label">应用名称</label>
        <div class="layui-input-block">
            <input type="text" name="appName" required lay-verify="required" placeholder="请输入"
                   autocomplete="off"
                   class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">秘钥</label>
            <div class="layui-input-block">
                <input type="text" name="appsecret" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">回调地址</label>
            <div class="layui-input-block">
                <input type="text" name="redirectUrl" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日调用量限制</label>
            <div class="layui-input-block">
                <input type="text" name="linit" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">连接公司id（可为空）</label>
            <div class="layui-input-block">
                <input type="text" name="cusld" required lay-verify="required" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="state"  lay-search="">
                    <option value="">请选择</option>
                    <option value="0">0-无效</option>
                    <option value="1">1-有效</option>
                </select>
            </div>
        </div>
    </form>
</script>